<template>
  <uni-nav-bar title="拼单详情" left-icon="left" @clickLeft="navBack" :fixed="true" statusBar></uni-nav-bar>
  <view class="package column" style="position: relative;" v-if="orderAll">
    <view class="column service" @click="shares" v-if="orderAll.state===1">
      <image :src="invitation3" mode="" style="width:68rpx;height:68rpx;"></image>
      <text style="font-size: 24rpx;">客服微信</text>
    </view>
    <view style="font-size: 36rpx;font-weight: 500;color: #F07204;">{{orderAll.state_text}}</view>
    <view style="margin:10rpx 0px 15rpx;color:#666;" @click="copyText(orderAll.order_sn)">
      <image src="../../static/index/copy.png" mode="" style="width:24rpx;height:24rpx;margin-right:10rpx;"></image>
      {{orderAll.order_sn}}
    </view>
    <view style="font-size: 34rpx;color: #F06E02;" v-if="orderAll.state===2">{{orderAll.score}}个蓝宝石已到账</view>
    <uni-section title="修改颜色" subTitle="设置 color \ background 属性设置组件颜色" type="line" padding
      v-if="!(orderAll.state===2||orderAll.state===-2)">
      <uni-countdown :show-day="false" :second="testSecond" color="#FFFFFF" background-color="#F39500"
        :show-colon="false" :font-size="18" @timeup="init" />
    </uni-section>
    <view style="width:100%;text-align: center;margin:20rpx 0px;" v-if="orderAll.state===-2">不要灰心 再接再厉</view>
    <view style="width:100%;text-align: center;margin:20rpx 0px;">{{orderAll.text}}</view>
    <GroupList :userList="orderAll.user_list"></GroupList>
    <view class="but" v-if="orderAll.state===1" @click="participate(2)">立即加注</view>
    <view class="but" v-else-if="orderAll.state===0" @click="participate(1)">参与拼单</view>
    <view class="but" v-else-if="orderAll.state===-3" style="background:#666">参与拼单</view>
    <view style="width:100%;text-align: center;margin:10rpx 0px;font-size: 20rpx;" v-if="orderAll.state===1">
      您可以选择在任意加注机上加注，也可联系安蓝客服享受配送到车服务
    </view>
    <view style="color:#43A8FF;" @click="telCall('400-109-1606')" v-if="orderAll.state===1">呼叫安蓝 400-109-1606</view>
  </view>
  <Gemstone></Gemstone>
  <Reward></Reward>
  <TransferPop ref="transfer"></TransferPop>
</template>

<script setup lang="ts">
  import { navBack, redirectTo } from '@/utils/navigator';
  import { telCall, copyText } from '@/utils/copyText';
  import { invitation3 } from '@/utils/Static';
  import TransferPop from '@c/earthPushing/common/transferPop.vue';
  import GroupList from '@c/together/groupList.vue';
  import Gemstone from '@c/together/gemstone.vue';
  import Reward from '@c/together/reward.vue';
  import { toPublish } from '@mqtt';
  import { getPinOrderdetails } from '@/gql/together';
  import { showLoading, errorToast, successToast } from '@/utils/prompt';
  import { onLoad } from '@dcloudio/uni-app';
  import { ref } from 'vue';
  import { getDriverID } from '@/stores/driverID';
  const driver_id = getDriverID();
  const transfer = ref(null)
  const testSecond = ref(0)
  const orderID = ref()
  const orderAll = ref()
  const Inviter_id = ref()
  onLoad((pearm) => {
    orderID.value = Number(pearm.pin_id)
    Inviter_id.value = Number.parseInt(pearm.driver_id)
    init()
  })
  function init() {
    showLoading()
    const payload = {
      query: getPinOrderdetails,
      variables: {
        id: Number(orderID.value),
        driver_id,
      },
    };
    toPublish(
      'ql/driver/getPinOrderdetails',
      payload,
      (obj : any) => {
        const { getPinOrderdetails } = obj.data;
        orderAll.value = getPinOrderdetails
        testSecond.value = orderAll.value.cha
      }
    );
  }
  function shares() {
    transfer.value.shares(invitation3, '客服微信')
  }
  function participate(type : number) {
    switch (type) {
      case 1:
        piecingTogether()
        break;
      case 2:
        redirectTo('together/solution')
        break;
    }
  }
  function piecingTogether() {
    showLoading()
    const payload = {
      pin_id: orderID.value,
      zhitui_id: Inviter_id.value,
      driver_id,
    };
    toPublish('driver/addPinUsers',
      payload,
      (obj : any) => {
        uni.hideLoading();
        const { code, msg } = obj;
        if (code === 1) {
          successToast(msg)
          init()
        } else {
          errorToast(msg)
        }
      }
    );
  }
</script>

<style scoped lang="less">
  .service {
    position: absolute;
    top: 20rpx;
    right: 10rpx;
  }

  .but {
    width: 660rpx;
    height: 92rpx;
    background: #F39500;
    border-radius: 46rpx;
    text-align: center;
    line-height: 92rpx;
    color: #fff;
    margin: 30rpx 0px 10rpx;
  }
</style>